<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR USER MANUAL</h1></td></tr>
</table></td>
</tr><tr>
<td>

<h1 class=cp10><font class=cf5>Definition of Xpbar and Bar's Items Position</font></h1>
<p class=cp10>CodeThatXPBar supports an ability of absolute and relative positioning.</p>

<pre class=cc1>
<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"absolute"</font> <font class=cc2>:</font> <font class=cc4>true</font><font class=cc2>,</font> <font class=cc6>"pos"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>200</font><font class=cc2>,</font> <font class=cc4>40</font><font class=cc8>]</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>In this example the bar is created with absolute positioning and we put it at the point (200, 40). When "absolute" property is set in false, it means the menu is created with relative positioning.</p>
<p class=cp10>The following example illustrates the case of center positioning of the bar:</p>

<pre class=cc1>
<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"absolute"</font> <font class=cc2>:</font> <font class=cc4>false</font><font class=cc2>,</font> <font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>Also you can</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>specify item width/height (size property),</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>define text alignment - left/right/center/middle (align property)</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>set default item's offset (itemoffset property)</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>specify bar size in case you'd like to set non-default values that were calculated automatically (fixwidth/fixheight properties)</p>
<p class=cp10>For example see the following:</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font>
<font class=cc7>{</font>
	<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>100</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
	<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
	<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"fixheight"</font> <font class=cc2>:</font> <font class=cc4>250</font>
<font class=cc7>}</font>
</pre>

<h2 class=cp10><font class=cf4>Example - XPBar and XPBar's items Positioning</font></h2>
<p class=cp10>You can see an example and complete code here - <a class=ca5 href="pos_ex.html" onclick="return openWin(800,550,'pos_ex.html')" target=_blank>XPBar and XPBar's items Positioning Example</a></p>
<p class=cp10><a class=ca7 href="bar_act.html">Read more about CodeThatXPBar&nbsp;&gt;&gt;</a></p>

</td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>